<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>画廊-多锚点选择</title>
</head>

<body>
  <div id="mountNode"></div>
  <script src="../build/g6.js"></script>
  <script src="../build/plugin.layout.dagre.js"></script>
  <script src="../build/plugin.edge.polyline.js"></script>
  <script>
    G6.registerNode('rect', {
      getPath(item) {
        const width = 100;   // 一半宽
        const height = 40;  // 一半高
        return G6.Util.getRectPath(-width/2, -height/2, width, height, 10);
      },
      anchor(node) {
          // const hierarchy = node.getHierarchy();
          const inEdges = node.getInEdges();
          const outEdges = node.getOutEdges();
          const inEdgesNum = inEdges.length;
          const outEdgesNum = outEdges.length;
          const inAnchorArea = 1 - 1 / (inEdgesNum + 1);
          const outAnchorArea = 1 - 1 / (outEdgesNum + 1);
          const inGap = inAnchorArea / inEdgesNum;
          const outGap = outAnchorArea / outEdgesNum;
          const inAnchors = getAnchors(inEdgesNum, inGap, 'in');
          const outAnchors = getAnchors(outEdgesNum, outGap, 'out');
          const anchor = inAnchors.concat(outAnchors);
          return anchor;
        }
    });
    const data = {
      nodes: [{
        id: '收集日志',
      }, {
        id: '入 es 集群',
      }, {
        id: '入 hdfs',
      },{
        id: '入 hdfs 2',
      }, {
        id: 'hive 计算',
      },{
        id: 'report',
      }],
      edges: [{
        source: '收集日志',
        target: '入 es 集群'
      },{
        source: '收集日志',
        target: '入 hdfs'
      },{
        source: '收集日志',
        target: '入 hdfs 2'
      },{
        source: '入 hdfs',
        target: 'hive 计算'
      },{
        source: '入 hdfs 2',
        target: 'hive 计算'
      },{
        source: '入 es 集群',
        target: 'hive 计算'
      },{
        source: 'hive 计算',
        target: 'report'
      }]
    };
    const graph = new G6.Graph({
      container: 'mountNode',
      fitView: 'cc',
      width: 500,
      height: 500,
      plugins: [new G6.Plugins['layout.dagre']()],
      defaultIntersectBox: 'rect' // 使用矩形包围盒
    });
    graph.node({
      shape: 'rect',
      label(model) {
        return model.id;
      },
      style: {
        stroke: '#ddf',
        fill: '#6694FF',
        fillOpacity: 0.45,
        lineWidth: 2
      }
    });
    graph.edge({
      // shape: 'polyline',
      style: {
        endArrow: true,
        stroke: '#bbb',
        lineWidth: 1.5,
        strokeOpacity: 1
      }
    });
    graph.read(data);

    function getAnchors(edgesNum, gap, type){
      const anchors = [];
      let y;
      if(type === 'out') y = 1;
      else y = 0;

      if(edgesNum % 2) { // odd number
        anchors.push([0.5, y]);
        for( let i = 1; i <= (edgesNum - 1) / 2; i += 1){
          anchors.push([0.5 - i * gap, y]);
          anchors.push([0.5 + i * gap, y]);
        }
      } else { // even number
        if (edgesNum != 0) {
          anchors.push([0.5 - gap / 2, y]);
          anchors.push([0.5 + gap / 2, y]);
          for( let i = 1; i <= (edgesNum - 2) / 2; i += 1){
            anchors.push([0.5 - gap / 2 - i * gap, y]);
            anchors.push([0.5 + gap / 2 + i * gap, y]);
          }
        }
       }
      return anchors
    }

  </script>
</body>
</html>